<!-- 编辑弹窗 -->
<template>
  <ele-modal
    form
    destroy-on-close
    :width="700"
    v-model="visible"
    :title="actionConfigs[action].title"
    @open="handleOpen"
    @close="handleCancel"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="currentRules"
      label-width="120px"
      @submit.prevent=""
    >
      <el-row :gutter="8">
        <el-col :span="24">
          <el-form-item label="订单号">
            {{ form.order_number }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="支付金额" prop="pay_price">
            <el-input
              clearable
              :maxlength="20"
              v-model="form.pay_price"
              placeholder="请输入支付金额"
            />
          </el-form-item>
          <el-form-item label="支付方式" prop="pay_method">
            <dict-data :code="'pay_method'" v-model="form.pay_method"
          /></el-form-item>
          <el-form-item label="支付时间">
            <el-date-picker
              v-model="form.pay_date"
              type="datetime"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择支付时间"
              class="ele-fluid"
            />
          </el-form-item>
          <el-form-item label="备注" prop="pay_note">
            <el-input
              clearable
              :maxlength="20"
              v-model="form.pay_note"
              placeholder="请输入备注"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row />
    </el-form>
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" :loading="loading" @click="handleSubmit">
        {{ actionConfigs[action].button }}
      </el-button>
    </template>
  </ele-modal>
</template>

<script setup>
import { addPayLog, updatePayLog, getPayLog } from "@/api/order/pay-log";

import { useFormEdit } from "@/hooks/useFormEdit";
const props = defineProps({
  /** 修改回显的数据 */
  data: Object,
  action: {
    type: String,
    default: "edit",
    validator: (value) => ["add", "edit", "view"].includes(value),
  },
  orderNumber: {
    type: String,
    default: "",
  },
  totalPrice: {
    type: Number,
    default: 0,
  },
});
const emit = defineEmits(["update:modelValue", "done", "open"]);

const actionConfigs = {
  add: {
    title: "新增入款信息",
    button: "新增",
    api: addPayLog,
    showFields: ["title", "cover"],
    disabledFields: [],
    rules: {},

    beforeOpen: ({ type, formData }) => {
      // 打开前的操作，可以修改表单数据
      formData.parent_id = props.parentId; // 使用props.organizationId初始化
      console.log("打开前的数据:", props);
      formData.order_number = props.orderNumber;
      formData.pay_price = props.totalPrice;
      console.log("打开前的数据:", formData);
      return { type, formData }; // 必须返回处理后的表单数据
    },
    afterOpen: async (form, formData) => {
      assignFields({ ...form, ...formData });
      return form;
    },
    beforeSubmit: async ({ type, formData }) => {
      // 提交前的操作，可以修改表单数据
      formData.order_number = props.orderNumber;
      console.log("提交数据:", formData);

      // if (!formData.requiredField) {
      // return Promise.reject(new Error("缺少必填字段")); // 返回rejected Promise中断流程
      // }
      return { type, formData }; // 必须返回处理后的表单数据
    },
  },
  edit: {
    title: "修改入款信息",
    button: "保存",
    api: updatePayLog, // 补充edit的API
    showFields: ["title", "cover"],
    disabledFields: [],
    rules: {},
    afterOpen: async () => {
      // 打开前的操作，可以修改表单数据
      return form; // 必须返回处理后的表单数据
    },
  },
  view: {
    title: "查看字典数据",
    button: "确定",
    // api: showDictionaryData, // 补充view的API
    showFields: ["pay_price", "pay_method", "pay_date", "pay_note"],
    disabledFields: [],
    rules: {},
  },
};

const {
  form,
  formRef,
  visible,
  loading,
  handleOpen,
  handleSubmit,
  currentRules,
  handleCancel,
  assignFields,
} = useFormEdit(props, emit, {
  actionConfigs,
  formFields: {
    id: void 0,
    order_number: "",
    pay_price: "",
    pay_method: 0,
    pay_note: "",
    pay_date: new Date().toISOString().replace(/T/, " ").replace(/\..+/, ""),
  },
  detailApi: getPayLog,
  idField: "id",
});
</script>
